<template>
    <div v-if="loginState" id="userInfoSetting">
      <div id="update-img">
        <h2>自定义上传</h2>
        <div id="user-head-update">
          <p>头像上传</p>
          <div id="headBox">
            <div v-if="newHeadImg === ''" class="nowHeadImg"><img :src="userInfo.headImg" alt=""></div>
            <div v-if="newHeadImg !== ''" class="nowHeadImg"><img :src="newHeadImg" @load="imgSuccess" @error="imgError" alt=""></div>
            <input id="newHeadImg" v-model="newHeadImg" type="text" class="input-70" placeholder="新头像链接">
          </div>
        </div>
      </div>
      <div id="userNormalInfo">
    <h2>用户基本信息</h2>
    <div id="userInfoBox">
      <div id="username-id">
        <p>显示名称</p>
        <input id="newNickname" type="text" class="input-100"  maxlength="12" spellcheck ='false' :placeholder="userInfo.nickname"/>
      </div>
  <!--    <div id="username-Profile">-->
  <!--      <p>个人简介</p>-->
  <!--      <textarea class="input-100"  maxlength="100" spellcheck ='false'/>-->
  <!--    </div>-->
    </div>
  </div>
      <div id="save-cancel">
        <button class="button button-color-white" @click="updateUserInfo">保存</button>
        <button class="button button-color-white" @click="clearInput">取消</button>
      </div>
    </div>
</template>

<script>
  import $ from 'jquery'

  export default {
    name: 'settingMenu-user',
    data(){
      return{
        userInfo:{},
        newHeadImg:'',
        loginState:false,
        imgLoading:false,
      }
    },
    methods:{
      clearInput(){
        $('#newHeadImg').val('')
        this.newHeadImg = ''
      },
      async updateUserInfo(){
        const newNickname = $('#newNickname').val()
        const newHeadImg = $('#newHeadImg').val()
        if(newNickname === '' && newHeadImg !== ''){
          if(this.imgLoading === true){
            const newUserArr = {
              userId: JSON.parse(sessionStorage.user).userId,
              nickname: JSON.parse(sessionStorage.user).nickname,
              headImg: newHeadImg,
            }
            const {data:res} = await this.$axios.post('v1/updateUser',newUserArr)
            if(res.code === 200){
              this.$message.success("更改成功")
            }
          }else{
            this.$message.error("头像地址错误")
            return false
          }

        }
        if(newHeadImg === '' && newNickname !== ''){
            const newUserArr = {
              userId: JSON.parse(sessionStorage.user).userId,
              nickname: newNickname,
              headImg: JSON.parse(sessionStorage.user).headImg,
            }
            const {data:res} = await this.$axios.post('v1/updateUser',newUserArr)
            if(res.code === 200){
              this.$message.success("更改成功")
            }
        }
        if(newHeadImg !== '' && newNickname !== ''){
          if(this.imgLoading === true){
            const newUserArr = {
              userId: JSON.parse(sessionStorage.user).userId,
              nickname: newNickname,
              headImg: newHeadImg,
            }
            const {data:res} = await this.$axios.post('v1/updateUser',newUserArr)
            if(res.code === 200){
              this.$message.success("更改成功")
            }
          }else{
            this.$message.error("头像地址错误")
            return false
          }
        }
        if(newHeadImg === '' && newNickname === ''){
          this.$message.warning("无更改")
          return false
        }
        const {data:res} = await this.$axios.post('v1/getUserInfo',{userId:JSON.parse(sessionStorage.user).userId})
        if (res.code === 200){
          window.sessionStorage.setItem("user",JSON.stringify(res.data))
          location.reload();
        }
      },
      isLogin(){
        if(sessionStorage.token){
          this.loginState = true
        }else{
          this.loginState = false
        }
      },
      imgSuccess(){
        this.imgLoading = true
      },
      imgError(){
        this.imgLoading = false
      }
    },
    created() {
      this.userInfo = JSON.parse(sessionStorage.user)
      this.isLogin()
    },
  }
</script>

<style lang="less" scoped>
  #userInfoSetting{
    margin: 30px 0;
    /*background-color: red;*/
  }
  p{
    color: var(--theme-fontMain);
  }
  h2{
    margin-top: 30px;
    color: var(--theme-fontMain);
  }
  .nowHeadImg{
    width: 120px;
    height: 120px;
    border-radius: 6px;
    background-color: black;
    margin-left: 20px;
  }
  #update-img{
    /*border: solid 1px black;*/
    /*border-radius: 6px;*/
  }

  #user-head-update{
    width: 50rem;
    height: 10rem;
    /*background-color: #5a5a5a;*/
    margin-top: 30px;
    display: flex;
  }
  #headBox{
    width: 100%;
    background-color: var(--theme-button);
    border-radius: 6px;
    display: flex;
    align-items: center;
    img{
      width: 100%;
      height: 100%;
      border-radius: 6px;
    }
  }
  #bgImgBox{
      width: 100%;
      background-color: #e9e9e9;
      border-radius: 6px;
  }
  #user-head-update p{
    width: 100px;
  }
  #user-bgImg-update{
    width: 50rem;
    height: 10rem;
    /*background-color: #5a5a5a;*/
    margin-top: 30px;
    display: flex;
  }
  #user-bgImg-update p {
    width: 100px;
  }
  #userInfoBox{
    /*display: flex;*/
    width: 100%;
    /*background-color: red;*/
  }
  #username-id{
    display: flex;
    width: 50rem;
    margin-top: 30px;
    /*align-items: center;*/
    /*background-color: blue;*/
  }
  #username-Profile{
    display: flex;
    width: 50rem;
    /*align-items: center;*/
  }
  #username-id p{
    width: 100px;
    height: 50px;
  }
  #username-Profile p{
    width: 100px;
    height: 50px;
  }
  textarea{
    border-radius: 6px;
    height: 80px;
    resize: none;
    padding: 5px 10px;
  }
  #save-cancel{
    display: flex;
    justify-content: space-between;
    width: 50rem;
  }
  #newHeadImg{
    margin-left: 20px;
    /*margin-right: 20px;*/
    /*position: absolute;*/

  }
  #save-cancel button{
    margin: 30px 0;
    width: 45%;
  }
</style>
